<template>
  <view class="content">
    <view class="info">
      <ul>
        <li>
          <view class="list_l">
            <text class="red">*</text>
            <text>入学时间</text>
          </view>
          <view class="list_r">
            <picker mode="date" :value="date" @change="bindsDateChange">
              <input type="text" placeholder-class="placeholder-class" disabled :value="sdata" placeholder="请选择" />
            </picker>
            <text class="select">></text>
          </view>
        </li>
        <li>
          <view class="list_l">
            <text class="red">*</text>
            <text>毕业时间</text>
          </view>
          <view class="list_r">
            <picker mode="date" :value="date" @change="bindeDateChange">
                <input type="text" placeholder-class="placeholder-class" disabled :value="edata" placeholder="请选择" />
            </picker>
            <text class="select">></text>
          </view>
        </li>
        <li>
          <view class="list_l">
            <text class="red">*</text>
            <text>学校</text>
          </view>
          <view class="list_r">
            <input placeholder-class = 'placeholder-class' type="text" placeholder="请填写" />
            <text class="select">></text>
          </view>
        </li>
        <li>
          <view class="list_l">
            <text class="red">*</text>
            <text>学历</text>
          </view>
          <view class="list_r">
            <picker  @change="bindPickerChange" :value="educationIndex" :range="educationArray">
              <input type="text" placeholder-class="placeholder-class" disabled :value="educationArray[educationIndex]" placeholder="请选择" />
            </picker>
            <text class="select">></text>
          </view>
        </li>
        <li>
          <view class="list_l">
            <text class="red">*</text>
            <text>专业</text>
          </view>
          <view class="list_r">
            <input placeholder-class = 'placeholder-class' type="text" placeholder="请填写" />
            <text class="select">></text>
          </view>
        </li>
      </ul>
    </view>
    <view class="save">
      保存
    </view>
  </view>
</template>

<script>
export default {
  data() {
    const currentsDate = this.getDate({
      format: true
    })
    return {
      educationArray: ['只会恰鸡屎','低能儿', '小学生', '初中生', '高中生', '中专', '专科', '本科', '研究生', '博士','绝地科学家','国家认证美食家'],
      educationIndex: '',
      // date: currentDate,
      date: currentsDate,
      sdata: '',
      edata: '',
    }
  },
  comments: {},
  methods: {
    bindPickerChange: function(e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.educationIndex = e.target.value
    },
    // bindDateChange: function(e) {
    //     this.date = e.target.value
    // },
    bindsDateChange: function(e) {
      this.sdata = e.target.value
    },
    bindeDateChange: function(e) {
      this.edata = e.target.value
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()

      if (type === 'start') {
        year = year - 60
      } else if (type === 'end') {
        year = year + 2
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>

.content {
  .red {
    color: red;
  }
  .grayColor {
    color: #dddddd;
  }
  .inColor {
    color: #333;
  }
  .select {
    color: #dddddd;
    font-size: 35rpx;
    margin-left: 2rpx;
  }
  .placeholder-class {
    color: #dddddd;
    font-size: 30rpx;
    text-align: right;
  }
  background-color: #f1f1f1;
  .info {
    background-color: #ffffff;
    margin-top: 10rpx;
    padding: 0 50rpx 20rpx;
    ul li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88rpx;
      border-bottom: 1px solid #dddddd;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      padding-top: 10rpx;
      .list_r {
        display: flex;
        align-items: flex-end;
        input {
          text-align: right;
        }
      }
    }
  }
  
  .save {
    width: 650rpx;
    height: 88rpx;
    background:rgba(1,132,233,1);
    border-radius:6px;
    margin: 30rpx auto ;
    font-size:34rpx;
    font-weight:500;
    color:rgba(255,255,255,1);
    text-align: center;
    line-height: 88rpx;
  }
}
</style>
